<template>
	<view class="my">
		<view class="information" @click="information">
			<u-icon name="bell" color="#fff" size="46"></u-icon>
		</view>
		<view class="top">
			<view class="top-left">
				<u-image
					width="100rpx"
					height="100rpx"
					:src="userInfo ? userInfo.imageUrl : ''"
					shape="circle"
					@click="handlerLogin"
				></u-image>
				<view class="userInfo">
					<view class="name" @click="handlerLogin">{{
						userInfo.userName || '点击登录'
					}}</view>
					<view class="isCheck" @click="getUserChecked">{{
						isCheck ? '已实名' : '未实名'
					}}</view>
					<view class="hos">{{ curHos || '未选择医院' }}</view>
				</view>
			</view>
			<view class="top-right">
				<view class="top-right_center">
					<u-icon
						name="setting-fill"
						color="#fff"
						size="40"
						@click="handlerNvtoSetting"
					></u-icon>
					<text @click="handlerNvtoSetting">设置</text>
				</view>
			</view>
		</view>
		<!-- 我的信息 -->
		<view class="myMessage">
			<view class="iconList">
				<view style="font-weight: bold; font-size: 32rpx">就诊信息</view>
				<u-grid
					:col="4"
					:border="false"
					v-if="menuList.length > 0"
					class="ListStyle"
				>
					<u-grid-item
						v-for="(item, index) in menuList"
						:key="index"
						:index="index"
						bg-color=""
						@click="handlerGridClick(item)"
					>
						<!-- <u-icon :name="item.menuIcon" size="34"></u-icon> -->
						<text :class="'icon iconfont ' + item.menuIcon"></text>
						<view class="grid-text" style="font-size: 26rpx">{{
							item.menuName
						}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<u-gap height="30" bg-color="rgb(243, 244, 246)" margin-top="20"></u-gap>
		<view class="myMessage">
			<view class="iconList">
				<view style="font-weight: bold; font-size: 32rpx">常用工具</view>
				<u-grid
					:col="4"
					:border="false"
					v-if="toolsList.length > 0"
					class="ListStyle"
				>
					<u-grid-item
						v-for="(item, index) in toolsList"
						:key="index"
						:index="index"
						bg-color=""
						@click="handlerNormalGridClick(item)"
					>
						<u-icon :name="item.menuIcon" size="46" v-if="index == 0"></u-icon>
						<text :class="'icon iconfont ' + item.menuIcon" v-else></text>
						<view class="grid-text" style="font-size: 26rpx">{{
							item.menuName
						}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getOrgMenuList, getSatisfactionSurvey } from '../../http/api'
export default {
	data() {
		return {
			menuList: [],
			toolsList: [
				{ id: 0, menuIcon: 'info-circle', menuName: '满意度调查' },
				{ id: 1, menuIcon: 'shyt-wodesuifang', menuName: '随访' },
			],
		}
	},
	computed: {
		...mapState({
			userInfo: state => state.userInfo,
			curHos: state => state.curHos,
			sessionKey: state => state.sessionKey,
			token: state => state.token,
			userId: state => state.userId,
			orgId: state => state.orgId,
			orgCode: state => state.orgCode,
			patientId: state => state.patientId,
			patientIdentity: state => state.patientIdentity,
		}),
		isCheck() {
			return this.userInfo.userName && this.userInfo.userIdcode ? true : false
		},
	},
	methods: {
		...mapMutations(['getUserInfo']),
		getOrgMenuList() {
			if (this.orgId) {
				getOrgMenuList({ formOrgId: this.orgId }).then(({ data, head }) => {
					// console.log(res)
					if (head.code == 200) {
						let arr = data.find(i => i.menuHref == '/my')
						if (arr && arr.children && arr.children.length > 0) {
							this.menuList = arr.children.filter(
								i => i.hideFlag == 0 && i.whetherEnable == 0,
							)
						} else {
							this.menuList = []
						}
					}
				})
			}
		},
		handlerNvtoSetting() {
			this.$router.navigateTo({
				url: '/pages/setting/index',
			})
		},
		fillMessage() {
			console.log('点击')
			this.$router.navigateTo({
				url: '/pages/siteList/siteList',
			})
		},
		handlerLogin() {
			let { userInfo, sessionKey, token, userId } = this
			if (!userInfo || !sessionKey || !token || !userId) {
				this.getUserInfo()
			}
		},
		getUserChecked() {
			this.$router.navigateTo({
				url: `/pages/addUserInfo/index?isCheck=${this.isCheck}`,
			})
		},
		handlerGridClick(i) {
			if (i.menuHref) {
				this.$router.navigateTo({
					url: i.menuHref + `?formId=${i.formId}`,
				})
			} else {
				if (i.formId) {
					this.$router.navigateTo({
						url: `/pages/appFormGenerator/index?id=${i.formId}&name=${i.menuName}`,
					})
				}
			}
		},
		// * 常用工具点击
		handlerNormalGridClick(i) {
			getSatisfactionSurvey({
				orgCode: this.orgCode,
				idCard: this.patientIdentity,
				formType: i.id,
			}).then(res => {
				let { data, head } = res
				if (head.code == 200) {
					this.$router.navigateTo({
						url: `/pages/appFormGenerator/index?id=${data[0].formId}&name=满意度调查&customerFormDataId=${data[0].id}&formDataJsonId=${data[0].formDataJsonId}&getFormData=true`,
					})
				} else if (head.code == 400) {
					this.$refs.uToast.show({
						title: head.msg,
						type: 'error',
						isTab: true,
					})
				}
			})
		},
		// 消息推送
		information() {
			this.$router.navigateTo({
				url: '/pages/notification/index',
			})
		},
	},
	onShow() {
		this.getOrgMenuList()
	},
}
</script>

<style lang="scss">
// page {
// 	// background: rgba(241, 241, 241, 0.8);
// }
.my {
	height: 100%;
	// background: #fff;
	.information {
		position: absolute;
		right: 10px;
	}
	.top {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		height: 200rpx;
		background: #5690fb;
		.top-left {
			height: 100%;
			display: flex;
			align-items: center;
			.userInfo {
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #fff;
				margin-left: 20rpx;
				.name {
					font-size: 35rpx;
				}
				.isCheck {
					background: rgba(255, 255, 255, 0.5);
					margin-top: 6rpx;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
				}
				.hos {
					margin-top: 6rpx;
					font-size: 24rpx;
				}
			}
		}
		.top-right {
			height: 100%;
			color: #fff;
			.top-right_center {
				height: 100%;
				display: flex;
				align-items: center;
			}
		}
	}
	.myMessage {
		margin-top: 20px;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	.iconList {
		border-radius: 6px;
		// box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
		.ListStyle {
			width: 0 !important;
		}
		.u-grid-item {
			background: none !important;
		}
	}
	.icon {
		font-size: 40rpx;
	}
}
</style>
